<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        canvas{
            background:#eee;
            width:98%;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="cons">2</div>
    <canvas id="canvas"  height="500"></canvas>
    <script src='../js/utils.js'></script>
    <script src='../js/arrow.js'></script>
    <script src='../js/ball.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            var ball = new Arrow();
            //var ball = new Ball();
            ball.x = canvas.width/2;
            ball.y = canvas.height/2;

            var angle =0,
                range = 30, // 振幅
                xspeed =1,
                yspeed = 0.05,
                speed = 0.01,
                centerX = canvas.width/2,
                centerY = canvas.height/2,
                radius = 100,
                radiusX = 50,
                radiusY = 100,
                centerSCale = 1;


            
            (function drawFram(){
                 window.requestAnimationFrame(drawFram,canvas);
                //context.clearRect(0,0,canvas.width,canvas.height);
                oval();
            })();

            

            // 平滑运动 
            function smoothmotion(){
                ball.x = canvas.width/2 + Math.sin(angle)*range;    // 核心
                angle+=0.1;
                ball.draw(context);
            }

            // 线性运动
            function linearmotion(){
               

                ball.x +=xspeed;    //水平，沿x轴方向水平运动
                if(ball.x>canvas.width+ball.radius){
                    ball.x = -ball.radius;
                }

                // 垂直，由于angle角度没有发生变化，所以纵坐标不变
                ball.y = canvas.height/2+Math.sin(angle)*range;

                angle +=0.05;
                ball.draw(context)
            }

            // 脉冲运动 
            function pulsingmotion(){
                
                // sin值得变化，导致ball.scaleX,ball.scaleY的属性变化
                ball.scaleX = ball.scaleY = centerSCale+Math.sin(angle)*range;
                angle+=speed;
                ball.draw(context)
            }

            // 正圆运动
            function perfectball(){
                // centerX,centerY 让球绕画布中心旋转
                ball.x = centerX + Math.sin(angle)*radius;
                ball.y = centerY + Math.cos(angle)*radius;

                // 角度增加
                angle +=speed;
                ball.draw(context)
            }

            // 椭圆运动
            function oval(){
                //当radius的值相等时为圆周运动
                //当radius的值不想等是为椭圆运动
                ball.x = centerX + Math.sin(angle)*radiusX; //radiusX = 50
                ball.y = centerY + Math.cos(angle)*radiusY; //radiusY = 100
                angle += speed;
                
                ball.draw(context);
            }
        }
    </script>
</body>
</html>
